<template>
    <div class="list">
        <h2>detail-copy</h2>
        <div class="info" v-if="info">
            <img :src="info.goodsImg" alt="">
            <p class="desc">{{ info.goodsName }}</p>
            <p class="price">{{ info.goodsPrice }}</p>
        </div>
    </div>
</template>

<script>
    /*  
        在Vue使用router插件之后, 同时绑定两个全局属性
            $router
            $route
    */

    import axios from "axios";
    export default {
        name:"DetailView",
        data(){
            return {
                gid:null,
                info:null,
            }
        },
        methods:{
            getGoodsInfo(){
                axios.get("http://121.43.116.41/demo/php/searchGoodsByGoodsId.php",{
                params:{
                    gid: this.gid,
                }
                }).then(responseOption=>{
                    console.log("响应配置对象",responseOption);
                    if(responseOption.status == 200){
                        return responseOption.data;
                    }
                }).then(res=>{
                    /* 
                        服务器返回数据 (后端定义)
                        {
                            status: 数据增删改查成功/失败,
                            message:"操作提示信息",
                            list:[],  // 数组=>返回数据有多条就放到数组中
                            data:{},  // 如果返回数据时单条,一般放到data中
                        }
                    */
                    console.log("请求数据",res);  

                    if(res.status){
                        this.info = res.data;
                    }
                })
            }
        },
        mounted () {
            // console.log("11",this); // 当前Vue实例中的代理对象

            // this=>访问全局属性
            // console.log(this.$router);  // 路由实例,存储所有路由信息 
            // console.log(this.$author);   // 测试
            // console.log(this.$date);   // 测试


            console.log(this.$route);   // 当前路由, 只存放当前url地址对应的路由信息

            let {gid} = this.$route.params;
            if(gid){
                this.gid = gid;
                this.getGoodsInfo();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .info img{
        width: 100%;

    }
</style>